<!-- 四张图片带标题横线部分 -->
<template>
   <div class="container container--zone " role="region" aria-label="other news">
      <div class="region region--full">
         <section class="component component--module section-grid">
            <oneTitleImgMoudle :headTitle='true' :retireTitle='false' :seeMore='true'
               :fourTitleImgData='fourTitleImgData' v-if="isShow"></oneTitleImgMoudle>
         </section>
      </div>
   </div>
</template>
<script setup>
import oneTitleImgMoudle from '../../../components/oneTitleImgMoudle/oneTitleImgMoudle.vue';
import homeRequest from "@/api/home.js";
const fourTitleImgData = ref([])
const isShow = ref(false)
onMounted(() => {
   getLanList()
})
// 获取新闻底部栏目接口
const getLanList = () => {
   homeRequest.newsGroupData({})
      .then((res) => {
         fourTitleImgData.value = res.data
         if (fourTitleImgData.value.length > 0) {
            fourTitleImgData.value.forEach((item) => {
               if (item.news.length > 0) {
                  item.imgUrl = item.news[0].imgUrl
                  item.title = item.news[0].title
                  item.uuid = item.news[0].uuid
               }
               item.news = item.news.slice(1)
            })
         }
         isShow.value = true
      })
}
</script>
<style lang='scss' scoped></style>